<style>

</style>
<template>
  <el-dialog
      title="项目Key配置"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
      :before-close="clearForm">
    <el-form
        :label-position="labelPosition"
        label-width="120px"
        :model="saveData"
        :rules="rules"
        ref="ruleForm"
    >
      <el-form-item label="项目" prop="appUuid">
        <el-select
            filterable
            clearable
            style="width: 300px"
            :disabled="saveData.id && saveData.id !==''"
            v-model="saveData.appUuid"
            placeholder="请选择项目">
          <el-option
              v-for="item in appOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配置Key" prop="appConfigName">
        <el-input :disabled="saveData.id && saveData.id !==''" v-model="saveData.appConfigName"></el-input>
      </el-form-item>
      <el-form-item label="配置值" prop="appConfigValue">
        <el-input v-model="saveData.appConfigValue"></el-input>
      </el-form-item>
      <el-form-item label="配置描述">
        <el-input v-model="saveData.desc"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="clearForm">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>

import {loadAppSelector} from "../../../api/loadSelectorApi";
import {remoteValidateAppConfigName, saveAppConfig} from "../../../api/appConfigApi";

export default {
  name: "appConfigForm",
  filters: {},
  components: {},
  data() {
    const validateAppConfigName = async (rule, value, callback) => {
      if (this.saveData.id) {
        callback()
      }
      let ret = await remoteValidateAppConfigName(this.saveData.appConfigName);
      if (ret.data.result) {
        callback()
      } else {
        callback(new Error("项目Name不能重复"))
      }
    };
    return {
      labelPosition: 'right',
      dialogVisible: false,
      appOptions: [],
      saveData: {
        appConfigName: '',
        appConfigValue: '',
        desc: '',
        appUuid: '',
        appConfigType: 'DEFAULT_SPRING'
      },
      rules: {
        appConfigName: [
          {required: true, message: '此项必填', trigger: 'blur'},
          {validator: validateAppConfigName, trigger: 'blur'}
        ],
        appConfigValue: [
          {required: true, message: '此项必填', trigger: 'blur'},
        ],
        appUuid: [
          {required: true, message: '此项必填', trigger: 'change'},
        ],
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async load(data) {
      let vm = this
      vm.appOptions = await loadAppSelector()
      if (data) {
        vm.saveData = vm.$cloneObj(data)
      }
      vm.dialogVisible = true
    },
    save() {
      let vm = this
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          await vm.doSave(this.saveData)
        }
      })
    },
    async doSave(saveData) {
      let vm = this
      let ret = await saveAppConfig(saveData);
      if (ret.ok) {
        vm.$message({type: 'success', message: '保存成功!'});
      } else {
        vm.$message({type: 'error', message: '保存失败：' + ret.message});
      }
      vm.clearForm()
      vm.$parent.query()
    },
    clearForm() {
      let vm = this
      try {
        vm.saveData = {
          appConfigName: '',
          appConfigValue: '',
          desc: '',
          appUuid: '',
          appConfigType: 'DEFAULT_SPRING'
        }
        vm.$refs['ruleForm'].resetFields()
      } catch (e) {
        console.log(e)
      }
      vm.dialogVisible = false
    },
  },
  watch: {}
}
</script>
